<!DOCTYPE html>
<html>
<head>
    <title>Pie labels</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div class="configuration k-widget k-header" style="width:170px;">
                <span class="configHead">Configuration</span>
                <span class="configTitle">Pie Chart</span>
                <ul class="options">
                    <li>
                        <input id="labels" checked="checked" type="checkbox" autocomplete="off" />
                        <label for="labels">Show labels</label>
                    </li>
                    <li>
                        <input id="alignCircle" name="alignType" type="radio"
                               value="circle" checked="checked" autocomplete="off" />
                        <label for="alignCircle">- aligned in circle</label>
                    </li>
                    <li>
                        <input id="alignColumn" name="alignType" type="radio"
                               value="column" autocomplete="off" />
                        <label for="alignColumn">- aligned in columns</label>
                    </li>
                </ul>
            </div>
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users in United States"
                        },
                        legend: {
                            visible: false
                        },
                        seriesDefaults: {
                            labels: {
                                template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                                visible: true
                            }
                        },
                        series: [{
                            type: "pie",
                            data: [ {
                                category: "2005",
                                value: 67.96
                            }, {
                                category: "2006",
                                value: 68.93
                            }, {
                                category: "2007",
                                value: 75
                            }, {
                                category: "2008",
                                value: 74
                            }, {
                                category: "2009",
                                value: 78
                            } ]
                        }],
                        tooltip: {
                            visible: true,
                            template: "#= category # - #= kendo.format('{0:P}', percentage)#"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);

                    $(".configuration").bind("change", refresh);
                });

                function refresh() {
                    var chart = $("#chart").data("kendoChart"),
                        pieSeries = chart.options.series[0],
                        labels = $("#labels").prop("checked"),
                        alignInputs = $("input[name='alignType']"),
                        alignLabels = alignInputs.filter(":checked").val();

                    chart.options.transitions = false;
                    pieSeries.labels.visible = labels;
                    pieSeries.labels.align = alignLabels;

                    alignInputs.attr("disabled", !labels);

                    chart.refresh();
                }
            </script>

            <style scoped>
                .chart-wrapper {
                	margin: 0 0 0 20px;
                	width: 466px;
                	height: 434px;
                	background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
                }
                
                .chart-wrapper .k-chart {
                    height: 280px;
                    padding: 37px;
                    width: 390px;
                }
            </style>
        </div>

</body>
</html>
